import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Calendar } from 'react-native-calendars';
import { useTheme } from '../../hooks/useTheme';

/**
 * 日历视图组件
 * 显示计划完成状态，支持点击查看详情
 */
const CalendarView = ({ markedDates, onDayPress }) => {
  const { theme, themeMode } = useTheme();

  return (
    <View style={[styles.container, { backgroundColor: theme.colors.card }]}>
      <Calendar
        key={themeMode} // 强制在主题切换时重新渲染
        markedDates={markedDates}
        onDayPress={onDayPress}
        markingType={'dot'}
        style={{
          backgroundColor: theme.colors.card,
        }}
        theme={{
          backgroundColor: theme.colors.card,
          calendarBackground: theme.colors.card,
          textSectionTitleColor: theme.colors.textSecondary,
          selectedDayBackgroundColor: theme.colors.primary,
          selectedDayTextColor: '#FFFFFF',
          todayTextColor: theme.colors.primary,
          dayTextColor: theme.colors.text,
          textDisabledColor: theme.colors.textSecondary,
          dotColor: theme.colors.primary,
          selectedDotColor: '#FFFFFF',
          arrowColor: theme.colors.primary,
          monthTextColor: theme.colors.text,
          indicatorColor: theme.colors.primary,
          textDayFontWeight: '500',
          textMonthFontWeight: 'bold',
          textDayHeaderFontWeight: '600',
          textDayFontSize: 16,
          textMonthFontSize: 18,
          textDayHeaderFontSize: 13,
          'stylesheet.calendar.header': {
            week: {
              marginTop: 5,
              flexDirection: 'row',
              justifyContent: 'space-between',
            },
          },
          'stylesheet.calendar.main': {
            container: {
              backgroundColor: theme.colors.card,
            },
          },
          'stylesheet.day.basic': {
            today: {
              backgroundColor: 'transparent',
            },
            todayText: {
              color: theme.colors.primary,
            },
          },
        }}
        // 显示月份导航
        enableSwipeMonths={true}
        // 最小日期：今年1月1日
        minDate={`${new Date().getFullYear()}-01-01`}
        // 最大日期：今天
        maxDate={new Date().toISOString().split('T')[0]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
  },
});

export default CalendarView;

